<template>
  <br />
  &emsp;
  <div style="font-size: 22px">
    转舍日期：<el-date-picker style="width: 100px" v-model="form.startDate">
    </el-date-picker
    >~<el-date-picker style="width: 100px" v-model="form.endDate"> </el-date-picker
    >&emsp;&emsp; 羊只耳号：
    <el-input style="width: 150px;" v-model="form.earNumbewr" ></el-input>
    &emsp;&emsp; 转舍类型：<el-select
            style="width: 100px"
            v-model="form.sheepTransferTypeId"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in transferType"
              :label="item.sheepTransferTypeName"
              :value="item.sheepTransferTypeId"
            />
          </el-select>&emsp;&emsp; 转出栋舍：<el-select
      style="width: 100px"
      placeholder="请选择"
      v-model="form.ouBarn"
      @change="getFields1(form.ouBarn)"
      clearable
    >
     <el-option
              v-for="item in Recordcottage"
               :label="item.cottageName"
              :value="item.cottagesId"
            />
    </el-select>&emsp;&emsp; 
    转出栏位：<el-select
            style="width: 100px"
            v-model="form.outPen"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in Fields"
              :label="item.fieIdName"
              :value="item.fieIdId"
            />
          </el-select>&emsp;&emsp; 转入栋舍：<el-select
      style="width: 100px"
      placeholder="请选择"
      v-model="form.transferBarn"
      @change="getFrequest(form.transferBarn)"
      clearable
    >
     <el-option
              v-for="item in Recordcottage"
               :label="item.cottageName"
              :value="item.cottagesId"
            />
    </el-select>&emsp;&emsp; 转入栏位：<el-select
            style="width: 100px"
            v-model="form.transferPen"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in Fields2"
              :label="item.fieIdName"
              :value="item.fieIdId"
            />
          </el-select>&emsp;&emsp;
    <el-button type="danger" size="large" @click="getDatas()"
      >查询</el-button
    ><br />
  </div>
  <br />
  <hr style="font-size: 20px" />
  <br />

  <el-table height="400" border style="width: 100%" :data="datas">
    <el-table-column type="selection" />
    <el-table-column label="序号">
      <template #default="{ $index }">
        {{ $index + 1 }}
      </template>
    </el-table-column>
    <el-table-column prop="transferDate" label="转舍日期" width="170" >
      <template v-slot="scope">
        <span>{{ scope.row.transferDate.substring(0,19).replace('T', ' ') }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="earNumbewr" label="羊只耳号" width="120" />
    <el-table-column prop="sheepTransferTypeName" label="转舍类型" width="120" />
    <el-table-column prop="cottageName" label="转出栋舍" width="120" />
    <el-table-column prop="fieldName" label="转出栏位"width="120" />
    <el-table-column prop="toCottageName" label="转入栋舍"width="120" />
    <el-table-column prop="toFieldName" label="转入栏位"width="120" />
    <el-table-column prop="varietyName" label="品种" />
    <el-table-column prop="gender" label="性别">
      <template v-slot="scope">
        <el-tag type="success" v-if="scope.row.gender==1" >公</el-tag>
        <el-tag type="danger" v-else >母</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="createName" label="创建人" />
    <el-table-column prop="createTime" label="创建时间" width="120" >
      <template v-slot="scope">
        <span>{{ scope.row.createTime.substr(0, 10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="updateName" label="修改人" />
    <el-table-column prop="updateTime" label="修改时间" width="120">
      <template v-slot="scope">
        <span>{{ scope.row.updateTime==null?"": scope.row.updateTime.substr(0, 10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="examName" label="审核人" />
    <el-table-column prop="examTime" label="审核时间" width="120">
      <template v-slot="scope">
         <span>{{ scope.row.examTime==null?"": scope.row.examTime.substr(0, 10) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="documentNo" label="单据号" width="150" />
    
  </el-table>


  <el-pagination
    v-model:current-page="form.pageIndex"
    v-model:page-size="form.pageSize"
    :page-sizes="[5, 10, 15, 20]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="form.totalCount"
    @size-change="handleSizeChange1"
    @current-change="handleCurrentChange1"
  />
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Back,
  Plus,
  Setting,
  SuccessFilled,
  Minus,
  Close
} from '@element-plus/icons-vue';
import { reactive, ref, onMounted, computed } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useCounterStore } from '@/stores/counter';

const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();

onMounted(() => {
  getTransferType();
  getRecordcottage();
  getDatas()
});


//获取转舍类型信息
const transferType: any = ref([])
const getTransferType = () => {
  axios.get("http://localhost:5039/api/ProductionManagement/SheepTransferTypeSearch").then(res => {
    transferType.value = res.data.data
    console.log(res.data)
  })
}



//显示请求form
const form = reactive({
  pageIndex: 1,
  pageSize: 5,
  startDate: '',
  endDate: '',
  sheepTransferTypeId: '',
  transferBarn: '',
  transferPen: '',
  ouBarn: '',
  outPen: '',
  earNumbewr: '',
  totalPage: 0,
  totalCount:0
})



//获取栋舍
const Recordcottage = ref<any>([]);
const Recordcottage2 = ref<any>([]);
const getRecordcottage = () => {
  axios
    .post('http://localhost:5039/api/Cottages/CottageList', {})
    .then((res) => {
      Recordcottage.value = res.data.data;
      Recordcottage2.value = res.data.data;
    });
};


//获取转出栏位
const Fields = ref<any>([]);

const getFields1 = (id: any) => {
  form.outPen=''
  console.log(id);
  axios
    .post('http://localhost:5039/api/Cottages/SearchFields', {
      cottagesId: id,
      pageIndex: 1,
      pageSize: 10
    })
    .then((res) => {
      Fields.value = res.data.data;
    });
};
//获取转出栏位信息
const Fields2 = ref<any>([]);
const getFrequest = (id: any) => {
  form.transferPen=''
  console.log(id);
  axios
    .post('http://localhost:5039/api/Cottages/SearchFields', {
      cottagesId: id,
      pageIndex: 1,
      pageSize: 10
    })
    .then((res) => {
      Fields2.value = res.data.data;
    });
};


//分页相关
const handleSizeChange1 = (val: any) => {
  form.pageSize = val;
  getDatas();
};

const handleCurrentChange1 = (val: any) => {
  form.pageIndex = val;
  getDatas();
};


//转舍信息查询
const datas: any = ref([])



const getDatas = () => {
  const request: any = ref({})
  request.pageIndex=form.pageIndex
  request.pageSize=form.pageSize
  request.startDate=form.startDate
  request.endDate=form.endDate
  request.sheepTransferTypeId=form.sheepTransferTypeId||0
  request.transferBarn=form.transferBarn||0
  request.transferPen=form.transferPen||0
  request.ouBarn=form.ouBarn||0
  request.outPen=form.outPen||0
  request.earNumbewr=form.earNumbewr
  axios.post("http://localhost:5039/api/ProductionManagement/SheepTransSearch", request).then(res => {
    console.log(res.data)
    datas.value = res.data.data
    form.totalCount = res.data.totalCount
    form.totalPage = res.data.totalPage
  })
}

</script>

<style scoped></style>
